<template>
	<view>
		<view class="search">
			<view class="cu-bar bg-white search">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="输入布种类型/布种名称" confirm-type="search"
						v-model="queryParams.clName"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-mauve shadow-blur round" @click="search">搜索</button>
				</view>
			</view>
		</view>
		<view class="cu-list menu sm-border padding">
			<u-empty v-if="dataList.length===0" icon="https://fziot.zheyun.top:9021/static/image/empty/data.png"></u-empty>
			<view class="cu-item arrow" 
			 @longpress="longpress(item)"
			 @click="updateCloth(item)"
			 v-for="item in dataList" >
				<view class="content">
					<text class="text-grey">{{item.clName}}</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{item.clType}}</text>
				</view>
			</view>
		</view>
		<view v-if="dataList.length!==0" class="juzhong" @click="lookMore()" style="color: gray;">{{look}}</view>
		<view class='placeholder-view'></view>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputCloth" mode="input" :title="title" @close="close()"
				@confirm="dialogInputConfirm">
				<view>
					<uni-forms ref="baseForm" :modelValue="formData" :rules="rules">
						<uni-forms-item label="名称" labelWidth="100rpx" name="clName">
							<uni-easyinput v-model="formData.clName" placeholder="请填写布种名称" maxlength="12" />
						</uni-forms-item>
						<uni-forms-item label="类型" labelWidth="100rpx" name="clType">
							<uni-easyinput v-model="formData.clType" placeholder="请填写布种类型" maxlength="12" />
						</uni-forms-item>
						<uni-forms-item label="单价" labelWidth="100rpx" name="clPrice">
							<uni-easyinput v-model="formData.clPrice" placeholder="请填写布种单价(元/圈)" maxlength="12" :disabled="canUpdate"  />
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog 
				type="warn" 
				cancelText="关闭" 
				confirmText="确定" 
				title="确定删除这个布种吗？" 
				@confirm="dialogDel()"
				@close="dialogClose">
			</uni-popup-dialog>
			</uni-popup>
		</view>


		<view class="bg-white padding-tb-sm" style="position: fixed;bottom: 0;text-align: center;width: 100%;">
			<button class="cu-btn bg-mauve round lg" style="width: 75%;" @click="addCloth()">添加布种</button>
		</view>
	</view>
</template>

<script>
	import {
		listCloth,
		getCloth,
		delCloth,
		addCloth,
		updateCloth
	} from "@/api/cloth/fzCloth.js";
	export default {
		data() {
			return {
				canUpdate:false,
				dataList: [],
				value: [],
				searchValue: '',
				count: null,
				look: '查看更多',
				title: '添加布种',
				waitDelId:null,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					clName: null,
					clType: null,
					clPrice: null,
					companyId: this.$store.getters.companyId,
				},
				formData: {
					clName: null,
					clType: null,
					clPrice: null,
					companyId: this.$store.getters.companyId
				},
				rules: {
					clName: {
						rules: [{
							required: true,
							errorMessage: '请填写名称',
							trigger: 'blur'
						}]
					},
					clType: {
						rules: [{
							required: true,
							errorMessage: '请填写类型',
							trigger: 'blur'
						}]
					},
					clPrice: {
						rules: [{
								required: true,
								errorMessage: '请填写单价',
								trigger: 'blur'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value !== '') {
										var reg = /^\d+(\.\d{1,})$|(^[1-9]\d*$)/;;
										if (!reg.test(value)) {
											callback('请输入正确格式，整数或小数');
										}
									} else {
										callback();
									}
								}
							},
						]
					},
				},
			};
		},
		onReady() {
			this.$refs.baseForm.setRules(this.rules)
		},
		mounted() {
			this.getDataList()
		},
		methods: {
			/**
			 * 添加布种
			 */
			addCloth() {
				this.$refs.inputDialog.open()
				this.operation = 'add'
				this.canUpdate = false
			},
			updateCloth(item) {
				this.canUpdate = true
				this.operation = 'update'
				this.$refs.inputDialog.open()
				this.title = '修改'
				this.formData.clId = item.clId
				this.formData.clName = item.clName
				this.formData.clType = item.clType
				this.formData.clPrice = item.clPrice
			},
			dialogInputConfirm() {
				this.$refs.baseForm.validate().then(res => {
					if ('update' === this.operation) {
						updateCloth({
							...this.formData
						}).then(res => {
							if (res.code === 200) {
								this.$modal.msgSuccess("修改成功")
								this.close()
								this.getDataList()
							}
						})
					} else {
						addCloth(this.formData).then(res => {
							if (res.code === 200) {
								this.$modal.msgSuccess("添加成功")
								this.close()
								this.getDataList()
							} else {
								this.$modal.msgError("添加失败")
							}
						})
					}
				})

			},
			close() {
				this.formData = {
						clName: null,
						clType: null,
						clPrice: null,
						companyId: this.$store.getters.companyId
					},
					this.$refs.inputDialog.close()
			},
			lookMore() {
				if (this.count === this.dataList.length) {
					this.look = '没有更多了'
				} else {
					this.queryParams.pageNum++
					listCloth(this.queryParams).then(res => {
						if (res.rows.length > 0) {
							this.dataList = _.concat(this.dataList, res.rows)
						}
					})
				}
			},
			getDataList() {
				this.queryParams.pageNum = 1
				listCloth(this.queryParams).then(res => {
					this.dataList = res.rows
					this.count = res.total
				})
			},
			search() {
				this.look = "查看更多"
				this.getDataList()
			},
			longpress(item){
				this.waitDelId = item.clId
				this.$refs.alertDialog.open()
			},
			dialogClose(){
				this.waitDelId = null
				this.$refs.alertDialog.close()
			},
			dialogDel(){
				delCloth(this.waitDelId).then(res=>{
					if (res.code === 200) {
						this.$modal.msgSuccess("删除成功")
						this.dialogClose()
						this.getDataList()
					} else {
						this.$modal.msgError("失败")
					}
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.search-area {
		display: flex;
		align-items: center;
	}

	.juzhong {
		flex-flow: row;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.placeholder-view {
		width: 100%;
		height: 150rpx;
	}
</style>
